<template>
  <div>
    <bread :first="'商品管理'"
           :second="'分类参数'"></bread>
    <el-card>
      <el-alert style="background-color: #e6a23c;color: #fff;"
                title="注意：只允许为第三级分类设置相关参数！"
                type="warning"
                show-icon>
      </el-alert>
      <!-- 级联选择器 -->
      <div style="margin:20px 0;">
        <span>选择商品分类: </span>
        <el-cascader v-model="value"
                     :options="options"
                     :props="{ expandTrigger: 'hover',value: 'cat_id',label: 'cat_name'}"
                     @change="handleChange"></el-cascader>
      </div>

      <!-- 标签页 -->
      <el-tabs v-model="tabValue"
               type="border-card"
               @tab-click='tabClick'>
        <el-tab-pane name='many'
                     label="动态参数">
          <el-button style="margin: 15px 0;"
                     :disabled='disabledFlag'
                     type="primary">添加参数</el-button>
          <!-- 参数表格--start -->

          <el-table border
                    :data="tableData"
                    style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scoped">

                <!-- tags--start -->
                <el-tag :key="index"
                        v-for="(tag,index) in scoped.row.attr_vals.split(',').filter(item=>item!='')"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input class="input-new-tag"
                          v-if="scoped.row.inputVisible"
                          v-model="scoped.row.inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm"
                          @blur="handleInputConfirm($event,scoped.row)">
                </el-input>
                <el-button v-else
                           class="button-new-tag"
                           size="small"
                           @click="showInput(scoped.row)">+ New Tag</el-button>
              </template>
            </el-table-column>
            <!-- tags--end -->

            <el-table-column label="#"
                             type="index">
            </el-table-column>
            <el-table-column label="参数名称"
                             prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-edit"
                           @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="mini"
                           type="danger"
                           icon="el-icon-delete"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 参数表格--end -->

        </el-tab-pane>
        <el-tab-pane name='only'
                     label="静态属性">
          <el-button :disabled='disabledFlag'
                     style="margin: 15px 0;"
                     type="primary">添加属性</el-button>
          <!-- 属性表格--start -->
          <el-table border
                    :data="tableData"
                    style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scoped">

                <!-- tags--start -->
                <el-tag :key="index"
                        v-for="(tag,index) in scoped.row.attr_vals.split(',').filter(item=>item!='')"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input class="input-new-tag"
                          v-if="scoped.row.inputVisible"
                          v-model="scoped.row.inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm"
                          @blur="handleInputConfirm($event,scoped.row)">
                </el-input>
                <el-button v-else
                           class="button-new-tag"
                           size="small"
                           @click="showInput(scoped.row)">+ New Tag</el-button>
              </template>
            </el-table-column>
            <!-- tags--end -->
            <el-table-column label="#"
                             type="index">
            </el-table-column>
            <el-table-column label="参数名称"
                             prop="name">
            </el-table-column>
            <el-table-column label="操作"
                             prop="desc">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-edit"
                           @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="mini"
                           type="danger"
                           icon="el-icon-delete"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 属性表格--end -->
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { goodsCateApi, paramsApi, addParamsAttrApi } from '@/api/index'
export default {
  name: '',
  props: {},
  data () {
    return {
      value: [],
      options: [],
      tableData: [],
      paramsObj: {
        type: 3
      },
      manyDate: [],
      tabValue: 'many',
      /* tags */
      dynamicTags: ['标签一', '标签二', '标签三']
      // inputVisible: false,
      // inputValue: ''
    }
  },
  methods: {
    handleChange (value) {
      // 点击了级联选择器 并选择了 才触发
      if (this.value.length !== 3) {
        // 清空value值
        this.value = []
      } else {
        // 表示选择的是第三级 或者: 数组的长度 ==3
        this.getManyData()
      }
    },
    // 获取分类数据列表
    async getCates () {
      const res = await goodsCateApi(this.paramsObj)
      console.log(res)
      this.options = res.data.data
    },

    // 获取动态数据
    async getManyData () {
      const res = await paramsApi({ id: this.value[this.value.length - 1], sel: this.tabValue })
      console.log(res)
      res.data.data.forEach(item => {
        item.inputVisible = false
        item.inputValue = ''
      })
      this.tableData = res.data.data
    },
    // 点击标签页
    tabClick () {
      // 判断是否选择了第三项
      if (this.value.length === 3) {
        this.getManyData()
      }
    },
    // tags
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput (row) {
      row.inputVisible = true

      this.$nextTick(() => {
        // 等待下一次dom结构更新完毕后再执行
        this.$refs.saveTagInput.focus() // 聚焦
      })
    },

    async handleInputConfirm (e, row) {
      if (!row.inputValue) {
        // 表单中没有值 不需要发送请求
        console.log(1)
        return false
      }
      console.log(row, 666)
      var attrVal = row.attr_vals ? row.attr_vals.split(',') : [] // 判断是否有值
      attrVal = [...attrVal, row.inputValue].join(',')

      const res = await addParamsAttrApi({
        id: this.value[this.value.length - 1],
        attr_name: row.attr_name,
        attrId: row.attr_id,
        attr_sel: this.tabValue,
        attr_vals: attrVal // attr_val.split()===[xixi]=== [xixi  11] ==>[xixi,11].join()
      })
      console.log(res, 2)
      // 刷新页面
      row.attr_vals = attrVal // 添加完毕后页面立马显示
      // 表单隐藏 表单值清空
      row.inputVisible = false
      row.inputValue = ''
    }
  },
  computed: {
    disabledFlag () {
      return this.value.length !== 3
    }
  },
  watch: {},
  created () {
    this.getCates()
  },
  mounted () { },
  components: {}
}
</script>

<style scoped lang="less">
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
